<div class="m-step3-detail" :important="mc_step3_detail">
  <div class="m-banners">
    <img :for="el in @tempinfo.banners"
     :attr="{src: el}" alt="banners">
  </div>
  <div class="m-info">
    <div class="m-temp">
      <div class="u-imgcon u-imgcon-square">
        <img :attr="{src: @tempinfo.logo + '?imageView2/1/w/160'}" alt="banners">
      </div>
      <div class="info">
        <h1 class="title">{{@tempinfo.title}}</h1>
        <p class="sign">{{@tempinfo.sign}}</p>
        <div class="star" :attr="{'data-score': @tempinfo.score}"></div>
        <div class="app">
          <div class="item item-app1">微信公众号</div>
          <div class="item item-app2">微信小程序</div>
          <div class="item item-app3">支付宝生活号</div>
          <div class="item item-app4">支付宝小程序</div>
        </div>
      </div>
    </div>
    <table class="m-app">
      <tr>
        <td width="120">最新版本</td>
        <td width="230">9.1.1</td>
        <td width="120">更新时间</td>
        <td>2017-10-11</td>
        <td rowspan="3" width="140">
          <div class="u-imgcon u-imgcon-square">
            <img :attr="{src: @tempinfo.qrcodeimg + '?imageView2/1/w/140'}" alt="banners">
          </div>
          <p>微信扫码体验</p>
        </td>
      </tr>
      <tr>
        <td>开发者</td>
        <td>烽报团队</td>
        <td>使用组织</td>
        <td>23家</td>
      </tr>
      <tr>
        <td>用户数</td>
        <td>1000万</td>
        <td>评价数</td>
        <td>133条</td>
      </tr>
    </table>
  </div>
  <ul class="u-nav">
    <li><a class="item current" :click="@bindGotoId($event, 'detail')">详情</a></li>
    <li><a class="item" :click="@bindGotoId($event, 'case')">案例</a></li>
    <li><a class="item">版本更新</a></li>
    <li><a class="item">评分</a></li>
  </ul>
  <div class="m-item" id="detail" name="detail">
    <div class="u-header">
      <h1>服务列表</h1>
    </div>
    <div class="m-content f-shadow f-radius">
      <h2 class="title">基础功能</h2>
      <table class="detail">
        <tr>
          <td width="120">组织管理</td>
          <td>面向中小企业或组织提供的室外办公协同服务。您可以在平台创建组织，将员工或组织成员加入进来，通过风暴APP/网站更好的通知管理。
</td>
          <td width="80" align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>店铺管理</td>
          <td>独立品牌，每个组织可以开通一个用来上架活动、票务、商品、内容服务的店铺，你可以发布到微信、支付宝、AppStore等应用市场。</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>支付服务</td>
          <td>帮您开通微信支付、支付宝支付，提供微信、支付宝收钱码物料，您可以登录烽报网站组织后台处理订单，使用收钱管钱运维工具，实现商业变现。</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>活动管理</td>
          <td>快速发布活动，处理票务订单，处理报名，发起投票，您可以使用烽报APP随时随地通知报名、签到用户，使用烽报网站分析数据。
</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>商品管理</td>
          <td>你可以快速上架您的入场劵、活动票务、商品到店铺，或者将商品嵌入到您的文章中，用户在购买后，您可以在烽报APP或网站上快速处理订单。</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>文章管理</td>
          <td>自动化将您举办的活动编写成文章，提供丰富的素材、网站极致的输入编辑体验，发布到您的服务品牌下，持续创造影响力</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
      </table>
    </div>
    <div class="m-content f-shadow f-radius">
      <h2 class="title">烽报服务</h2>
      <table class="detail">
        <tr>
          <td width="120">手机网页</td>
          <td>面向中小企业或组织提供的室外办公协同服务。您可以在平台创建组织，将员工或组织成员加入进来，通过风暴APP/网站更好的通知管理。</td>
          <td width="80" align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>电脑网页</td>
          <td>面向中小企业或组织提供的室外办公协同服务。您可以在平台创建组织，将员工或组织成员加入进来，通过风暴APP/网站更好的通知管理。</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>支付服务</td>
          <td>帮您开通微信支付、支付宝支付，提供微信、支付宝收钱码物料，您可以登录烽报网站组织后台处理订单，使用收钱管钱运维工具，实现商业变现。</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>APP应用</td>
          <td>面向中小企业或组织提供的室外办公协同服务。您可以在平台创建组织，将员工或组织成员加入进来，通过风暴APP/网站更好的通知管理。</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
      </table>
    </div>
    <div class="m-content f-shadow f-radius">
      <h2 class="title">第三方服务</h2>
      <h3>微信服务</h3>
      <table class="detail">
        <tr>
          <td width="120">小程序</td>
          <td>面向中小企业或组织提供的室外办公协同服务。您可以在平台创建组织，将员工或组织成员加入进来，通过风暴APP/网站更好的通知管理。</td>
          <td width="80" align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>公众号</td>
          <td>面向中小企业或组织提供的室外办公协同服务。您可以在平台创建组织，将员工或组织成员加入进来，通过风暴APP/网站更好的通知管理。</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>微信支付</td>
          <td>面向中小企业或组织提供的室外办公协同服务。您可以在平台创建组织，将员工或组织成员加入进来，通过风暴APP/网站更好的通知管理。</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
      </table>
      <h3>支付宝服务</h3>
      <table class="detail">
        <tr>
          <td width="120">小程序</td>
          <td>面向中小企业或组织提供的室外办公协同服务。您可以在平台创建组织，将员工或组织成员加入进来，通过风暴APP/网站更好的通知管理。</td>
          <td width="80" align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>生活号</td>
          <td>面向中小企业或组织提供的室外办公协同服务。您可以在平台创建组织，将员工或组织成员加入进来，通过风暴APP/网站更好的通知管理。</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
        <tr>
          <td>收钱码</td>
          <td>面向中小企业或组织提供的室外办公协同服务。您可以在平台创建组织，将员工或组织成员加入进来，通过风暴APP/网站更好的通知管理。</td>
          <td align="center"><i class="s-icon s-icon-on s-icon-checked"></i></td>
        </tr>
      </table>
    </div>
  </div>
  <!-- 预览 -->
  <div class="m-item">
    <div class="u-header"><h1>预览</h1></div>
    <div class="m-content m-content-pre">
      <ul class="m-pre">
        <li :for="el in @tempinfo.preimgs">
          <img :attr="{src: el + '?imageView/1/w/180/h/320'}" alt="app预览图片">
        </li>
        <li :for="el in @tempinfo.preimgs">
          <img :attr="{src: el + '?imageView/1/w/180/h/320'}" alt="app预览图片">
        </li>
        <div class="f-clearfix"></div>
      </ul>
    </div>
  </div>
  <!-- 预览 END -->
  <!-- 简介 -->
  <div class="m-item">
    <div class="u-header"><h1>简介</h1></div>
    <div class="m-content" :html="@tempcms.text">
    </div>
  </div>
  <!-- 简介 END -->
  <!-- 案例 -->
  <div class="m-item" id="case" name="case">
    <div class="u-header">
      <h1>案例</h1>
    </div>
    <div class="m-content m-content-case f-shadow f-radius" :for="el in @temporg">
      <div class="info">
        <h2 class="name">{{el.title}}</h2>
        <p class="sign">这是一段公司描述</p>
        <div class="count">
          <div class="item">组织成员：<span>{{@formatZero(el.mbrcount)}}</span></div>
          <div class="item">举办活动数：<span>{{@formatZero(el.actcount)}}</span></div>
          <div class="item">关注：<span>{{@formatZero(el.followcount)}}</span></div>
        </div>
        <p class="address">这里是我公司地址</p>
        <p class="date">{{@formatTime(el.createtime, 'en')}}</p>
      </div>
      <div class="logo">
        <div class="u-imgcon u-imgcon-square">
          <img :attr="{src: el.logo + '?imageView2/1/w/130', alt: el.title}">
        </div>
        <div class="app">
          <img src="../../../../_common/imgs/icon_app1.png">
          <img src="../../../../_common/imgs/icon_app2.png">
          <img src="../../../../_common/imgs/icon_app3.png">
          <img src="../../../../_common/imgs/icon_app4.png">
        </div>
      </div>
    </div>
  </div>
  <!-- 案例 END -->
  <!-- 浮动菜单 -->
  <table class="u-menu">
    <tr>
      <td :class="@getStatus(@status, @payed, 'class')" :text="@getStatus(@status, @payed, 'text')" :click="gotoPay()"></td>
      <td>体验</td>
      <td>联系开发者</td>
      <td>评论</td>
      <td>分享</td>
    </tr>
  </table>
  <!-- 浮动菜单 END -->
</div>
